import Vue from "vue";
import VueRouter from "vue-router";

// 引入一个可能要呈现组件(@指代src目录 配置文件：vite.config.ts)
// 也可以使用相对路径
import TestExam from "../views/TestExam/index.vue";
import TestExamFenYe from "../views/TestExamFenYe/index.vue";
import Login from "../views/Login/index.vue";
import MainPage from "../views/MainPage/index.vue";
import SysStudent from '../views/SysStudent/index.vue';
import Grade from '../views/Grade/index.vue'
import Position from '../views/Position/index.vue'
import PositionAndEmployee from '../views/Position/index2.vue'
import Bills from '../views/Bills/index.vue'
import Statistics from '../views/Statistics/index.vue'
import StatisticsTechStyle from '../views/StatisticsTechStyle/index.vue'
import SysRole from '../views/SysRole/index.vue'
// import {useRouter} from 'vue-router'

Vue.use(VueRouter);
// const router = useRouter()

//解决重复点击相同路由报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => {
        if (err.name !== 'NavigationDuplicated') throw err
    })
}

const router = new VueRouter({
    routes:[
        // 路由配置,什么路径跳转到哪个组件
        
        {
            path:"/",
            name:"login",
            component:Login
        },
        {
            path:"/main",
            name:"main",
            component:MainPage,
            children:[
                    {
                        path:"testExam",     // 嵌套子路由,从主页跳转到相应路径,前面不能加斜杠 /
                        name:"testExam",
                        component:TestExam   // 指定路径跳转的页面组件
                    },
                    {
                        path:"testExamFenYe",
                        name:"testExamFenYe",
                        component:TestExamFenYe
                    },
                    {
                        path:"sysStudent",
                        name:"sysStudent",
                        component:SysStudent
                    },
                    {
                        path:"grade",
                        name:"grade",
                        component:Grade
                    },
                    {
                        path:"position",
                        name:"position",
                        component:Position
                    },
                    {
                        path:"bills",
                        name:"bills",
                        component:Bills
                    },
                    {
                        path:"PositionAndEmployee",
                        name:"PositionAndEmployee",
                        component:PositionAndEmployee
                    },
                    {
                        path:"statistics",
                        name:"statistics",
                        component:Statistics
                    },
                    {
                        path:"statisticsTechStyle",
                        name:"statisticsTechStyle",
                        component:StatisticsTechStyle
                    },
                    {
                        path:"sysRole",
                        name:"sysRole",
                        component:SysRole
                    },


            ]
        },
        // 路由重定向
        {
            path:"/redirect",
            redirect:"/login"
        },
    ],
    // 指定history模式  
    // hash 模式 （默认）可省略
    // 1. history模式
    // 	优点：URL更加美观，不带有 #，更接近传统的网站 URL，搜索引擎更容易收录。
    // 	缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有 404 错误。

    // 2. hash 模式
    // 	优点：兼容性更好，因为不需要服务器端处理路径。
    // 	缺点：URL 带有 # 不太美观，且在 搜索引擎 优化方面相对较差。

    mode: 'history', 
})

// router.beforeEach((to,from,next) => {
//    console.log("前路由守卫..................");
//    console.log(to);  // 去向路由
//    console.log(from); // 从哪来的路由
//    console.log(next); // 放行函数
//    next()
// })

// router.afterEach((to,from) => {
//     console.log("后路由守卫..................");
//     console.log(to,from)
// })



export default router;

